<template>
	
	<view class="relic-item" :disbaled="isClicked">
		<view class="relicImg" @click="gotoBigDetail(relic)">
			<image :src="relic.photo" mode="aspectFill" class="img"></image>
		</view>
		<view class="relic-item-content" @click="gotoBigDetail(relic)">
			<view class="name">文物名：{{relic.exhibitName}}</view>
			<view class="year">年份：{{relic.year}}</view>
		</view>
		
		<view class="praise-content">
			<view class="praise-counts">
				<text>点赞数：</text>
				<view class="praises">{{relic.praises}}</view>
			</view>
			<view class="praise" @click="praiseClick(relic)">
				<text class="praise-click">点赞</text>
				<uni-icons type="heart" v-if="!checkPraise()"></uni-icons>
				<uni-icons type="heart-filled" color="red" v-else></uni-icons>
			</view>
		</view>
	</view>
		
	
</template>

<script>
	export default {
		props: {
			relic: {
				type: Object,
				default: {}
			},
			isPraise: {
				type: Boolean,
				default: false
			},
			isClicked: {
				type: Boolean,
				default: false
			},
			likeIds: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				// isShow: false
			};
		},
		methods: {
			//用户给文物点赞
			praiseClick(exhibit) {
				// console.log("子组件的值1：", this.relic.hits)
				// this.isPraise = !this.isPraise
				this.$emit('praiseClick', this.relic, this.isPraise)
				// this.checkPraise()
				
			},
			//跳转到大的文物详情页
			gotoBigDetail(relic) {
				uni.navigateTo({
					url: `/subpkg/relicBigDetail/relicBigDetail?detail=${JSON.stringify(relic)}`
				})
			},
			//进来页面时初始化点赞状态
			checkPraise() {
				
				if(this.likeIds === []) {
					return false
				}
				else {
					let flag = 0
					this.likeIds.forEach(x => {
						if(x === this.relic.exhibitId) {
							flag = 1
						}
					})
					if(flag === 1) return true
					return false
				}
			},
		},
		watch: {
			relic(newVal) {
				this.relic = newVal
			},
			likeIds(newVal) {
				this.likeIds = newVal
				// this.checkPraise()
			}
		},
		mounted() {
			// this.checkPraise()
		}
	}
</script>

<style lang="scss">
//每一件文物
.relic-item {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 240px;
	width: 150px;
	margin: 10px;
	padding: 2px 0;
	// border: 1px solid blue;
	background-color: #CDBE70;
	border-radius: 10%;
	
	//文物图片
	.relicImg {
		height: 100px;
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		.img {
			// width: 100%;
			// height: 90%;
			height: 100px;
			width: 100px;
			border-radius: 50px;
		}
	}
	
	//文物描述
	.relic-item-content {
		display: flex;
		flex-direction: column;
		font-size: 15px;
		padding: 10px 0 0 0;
		.name {
			font-weight: bold;
			margin: 5px 0;
		}
	}
	
	//文物点赞样式
	.praise-content {
		display: flex;
		justify-content: space-between;
		width: 90%;
	
		//显示点赞数
		.praise-counts {
			display: flex;
			.praises { 
				font-size: 15px;
				color: red;
			}
		}
		//点击点赞
		.praise {
			font-size: 15px;
			// display: flex;
			// justify-content: flex-end;
			.praise-click {
				margin: 0 1px;
			}
		}
	}
}


	
</style>
